<template>
  <div class="budget">
    <el-row>
      <el-col :span="24">
        <lineChart
          v-if="dataArr.length !== 0"
          :lineData="dataArr"
          :xData="xData"
          :width="width"
          :height="height"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import lineChart from "@/views/home/budget/components/lineChart.vue";

export default {
  name: "budget",
  components: {
    lineChart,
  },
  props: {
    comBudgetdata: {
      type: Object,
      default: {},
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: Number,
      default: 200,
    },
  },
  data() {
    return {
      dataArr: [],
      xData: [],
    };
  },
  mounted() {
    // console.log(this.comBudgetdata, 9999);
    // this.getBudgetdata();
  },
  created() {},
  watch: {
    comBudgetdata: {
      handler(val) {
        if (val) {
          this.getBudgetdata();
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    getBudgetdata() {
      this.xData = [];
      this.dataArr = [];
      // console.log(this.comBudgetdata, 111);
      this.xData = this.comBudgetdata.budgetManageStatics.xData;
      let yData = this.comBudgetdata.budgetManageStatics.yData;
      // let colorArr = ["#3669D4", "#32B69F", "#4F5467", "#E1B228", "#C44729"];
      // console.log(yData, this.xData);
      if (yData != undefined) {
        if (yData.length > 0) {
          yData.map((item) => {
            let obj = {
              name: item.name,
              data: item.data,
              type: "line",
              showSymbol: false,
              smooth: true,
              lineStyle: {
                width: 2,
                // color: colorArr[index].color,
              },
              itemStyle: item.itemStyle,
              areaStyle: {
                opacity: 0.4,
              },
              // 高亮
              emphasis: {
                focus: "series",
              },
            };
            this.dataArr.push(obj);
          });
        } else {
          let obj = {
            name: "",
            data: [
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
              "0.00",
            ],
            type: "line",
            showSymbol: false,
            smooth: true,
            lineStyle: {
              width: 2,
              // color: colorArr[index].color,
            },
            areaStyle: {
              opacity: 0.4,
              // color: "#5B8FF9",
            },
            // 高亮
            emphasis: {
              focus: "series",
            },
          };
          this.dataArr.push(obj);
        }
      }
    },
  },
};
</script>

<style scoped lang="scss">
.budget {
  // height: 350px;
  width: 100%;
}
</style>
